<template>
<Form ref="loginForm" :rules="rules" class="login-container" label-position="left">
    <div class="logo-content">
        <img class="logo-img" :src="logoImg">
    </div>
    <h3 class="login-title">登录NIKE账号</h3>
    <FormItem prop="account">
        <Input :disabled="loading" type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></Input>
    </FormItem>
    <FormItem prop="password">
    <Input :disabled="loading" type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></Input>
    </FormItem>
    <checkbox class="login-remember" v-model="checked" label-position="left">保持登录状态</checkbox>
    <FormItem style="width: 100%">
        <Button :loading="loading" type="primary" @click.native.prevent="handleSubmit" style="width: 100%;background-color:#000">登录</Button>
    </FormItem>
</Form>

</template>

<script>
import { postRequest } from '../utils/api'
export default {
    data() {
        return {
            logoImg:require('../../static/images/logo-jordan.svg'),
            rules: {
                account: [{
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                password: [{
                    message: '请输入密码',
                    trigger: 'blur'
                }]
            },
            checked: false,
            loginForm: {
                username: 'sxy',
                password: '123'
            },
            loading: false
        }
    },
    methods: {
        submitClick: function () {
            var _this = this;
            this.loading = true;
            postRequest('/login', {
                username: this.loginForm.username,
                password: this.loginForm.password
            }).then(resp => {
                _this.loading = false;
                if (resp.status == 200) {
                    //成功
                    var json = resp.data;
                    if (json.status == 'success') {
                        _this.$router.replace({
                            path: '/'
                        });
                        this.$emit('loadUserName');
                    } else {
                        // _this.$alert('登录失败!', '失败!');
                    }
                } else {
                    //失败
                    // _this.$alert('登录失败!', '失败!');
                }
            }, resp => {
                _this.loading = false;
            });
        },
        handleSubmit: function () {
            let that = this;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    that.submitClick();
                }
            });
        },
    }
}
</script>

<style>
.login-container {
    padding: 35px 35px 15px 35px;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
}
</style>
